<template>
    <div class="box">
        <el-card>
            <template #header>
                <h3>菜品分类列表</h3>
            </template>
            <!-- 数据区域 -->
            <el-table :data="tableData" border>
                <el-table-column prop="shopName" label="店铺名称"></el-table-column>
                <el-table-column prop="categoryName" label="菜品分类"></el-table-column>
                <el-table-column label="操作">
                    <template #header>
                        <el-button type="primary" @click="handleAdd" size="small">
                            添加分类
                        </el-button>
                    </template>
                    <template #default="scope">
                        <el-button type="primary" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                        <el-button type="success" @click="getFoodType(scope.row)">
                            查询菜品
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <template #footer>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[2, 3, 5, 10]" layout="total, sizes,  prev, pager, next" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </template>
        </el-card>
        <el-dialog v-model="dialogFormVisible" :title="title" width="500">
            <el-form :model="foodCategoryForm">
                <el-form-item label="菜品分类名称">
                    <el-input v-model="foodCategoryForm.categoryName" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addData"> 提交 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import * as foodAPI from "@/api/food.js";
export default {
    data() {
        return {
            // 弹窗
            dialogFormVisible: false,
            title: "添加菜品分类",
            // 弹窗中的表单数据
            foodCategoryForm: {},
            // 分页参数
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 数据列表
            tableData: [],
        };
    },
    methods: {
        handleSizeChange() {
            this.loadFoodCategoryList();
        },
        handleCurrentChange() {
            this.loadFoodCategoryList();
        },
        // 点击删除按钮
        handleDelete(row) {
            foodAPI
                .foodCategoryDeleteAPI({ categoryId: row.categoryId, op: "del" })
                .then((resp) => {
                    if (resp.data == 1) {
                        ElMessage({
                            message: '删除成功',
                            type: 'success',
                        });
                        this.loadFoodCategoryList();
                    }
                });
        },
        // 点击页面表格中添加按钮
        handleAdd() {
            this.dialogFormVisible = true;
            this.title = "添加菜品分类";
            this.foodCategoryForm = {};
        },
        // 点击页面表格中编辑按钮
        handleEdit(row) {
            this.dialogFormVisible = true;
            this.title = "编辑菜品分类";
            this.foodCategoryForm = row;
        },
        // 点击弹窗中的提交按钮
        addData() {
            // 判断本次添加还是修改
            if (this.title == "添加菜品分类") {
                foodAPI
                    .addFoodTypeApi({
                        ...this.foodCategoryForm,
                        shopId: this.$route.query.shopId,
                        op: "add"
                    })
                    .then((resp) => {
                        if (resp.data == 1) {
                            ElMessage({
                                message: '添加成功',
                                type: 'success',
                            });
                            this.dialogFormVisible = false;
                            this.loadFoodCategoryList();
                        }
                    });
            } else {
                foodAPI.updateFoodTypeApi({ ...this.foodCategoryForm, op: "update" }).then((resp) => {
                    if (resp.data == 1) {
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        });
                        this.dialogFormVisible = false;
                        this.loadFoodCategoryList();
                    }
                });
            }
        },
        // 加载菜品分类列表数据
        loadFoodCategoryList() {
            foodAPI
                .foodTypeApi({
                    shopId: this.$route.query.shopId,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    op: "get"
                })
                .then((resp) => {
                    this.total = resp.data.total;
                    this.tableData = resp.data.datas;
                });
        },
        // 点击查询菜品
        getFoodType(row) {
            this.$router.push({
                path: "/food",
                query: {
                    shopId: row.shopId,
                    categoryId: row.categoryId,
                },
            });
        }
    },
    created() {
        // 判断是否有店铺id
        if (!this.$route.query.shopId) {
            ElNotification.error("请先选择店铺，然后点击查询菜品分类");
            this.$router.push("/shopList");
        }
        this.loadFoodCategoryList();
    },
};
</script>

<style scoped></style>